<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.network.ip_address')">
      <div
        v-if="
          type === 'ClusterIP' || type === 'LoadBalancer' || type === 'NodePort'
        "
      >
        <el-row>
          <el-col :span="12">
            <el-input
              v-model="specObj.clusterIP"
              placeholder="e.g. 10.1.1.1"
              @input="$forceUpdate()"
            />
          </el-col>
        </el-row>
        <h2>{{ $t("business.network.external_ip") }}</h2>
      </div>
      <div>
        <div
          v-for="(row, index) in specObj.externalIPs"
          v-bind:key="index"
          style="margin-top: 5px"
        >
          <span v-if="false">{{ row }}</span>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input
                v-model="specObj.externalIPs[index]"
                placeholder="e.g. 10.1.1.1"
                @input="$forceUpdate()"
              />
            </el-col>
            <el-col :span="2">
              <el-button
                type="text"
                style="font-size: 10px"
                @click="onHandleDelete(index)"
              >
                {{ $t("commons.button.delete") }}
              </el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="margin-top: 5px">
        <el-button @click="onHandleAdd">{{
          $t("commons.button.add")
        }}</el-button>
      </div>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
type Prop = {
  type?: string;
};

const props = defineProps<Prop>();
const specObj = defineModel<any>("specObj");

const title = ref(t("business.network.ip_address"));

const onHandleDelete = index => {
  specObj.value.externalIPs.splice(index, 1);
};

const onHandleAdd = () => {
  specObj.value.externalIPs.push("");
};

watch(
  () => props.type,
  newValue => {
    if (newValue === "ExternalName" || newValue === "Headless") {
      title.value = t("business.network.external_ip");
    } else {
      title.value = t("business.network.ip_address");
    }
  }
);
</script>

<style scoped></style>
